<script setup>
import { ref, watch, onMounted, computed } from 'vue';
import { useRouter } from 'vue-router';
import _ from 'lodash';
import AppsSelect from './apps-select.vue'
// import AppsCore from './apps-core.vue';
import AppSync from './app-sync.vue';
import FormApp from '../basic/menus/form-app.vue';
import { $menuUtils } from "@jzl/utils";
import { DFT_ICONS } from "@jzl/icons";
import {api} from "@jzl/api";

const router = useRouter();
const appId = ref(null);
const appSelectRef = ref(null)
// const tabActive = ref('menu');
const selectAppshow = ref(false);
const app = ref(null);

const appFormShow = ref(false);
const appFormWinName = ref('修改应用');
const appSyncShow = ref(false);
const appSyncWinName = ref('同步应用');

const routerName = computed(() => {
  return router.currentRoute.value.name;
});

const init = async () => {
  const currentAppId = router.currentRoute.value.params.appId;

  if (currentAppId && appId.value === currentAppId) return;

  appId.value = currentAppId;

  if (currentAppId) {
    app.value = await api.group.getGroup(currentAppId);
  }

  if (app.value) {
    if (routerName.value === 'portal-apps' || routerName.value === 'portal-app') {
      handleGoAppDetail();
    }
  }
};

const handleGoAppDetail = () => {
  router.push({
    name: 'portal-app-detail',
    params: {
      appId: _.get(app.value, "group_id")
    },
    replace: true
  });
};

const handleSelectTab = (type) => {
  router.push({
    name: `portal-app-${type}`,
    params: {
      appId: _.get(app.value, "group_id")
    },
    replace: true
  });
};

const handleSelectApp = (selectedApp) => {
  // selectAppshow.value = false;
  if (!selectedApp || !selectedApp.group_id) return;

  router.push({
    name: `portal-app-detail`,
    params: {
      appId: _.get(selectedApp, "group_id")
    },
    replace: true
  });
  appSelectRef.value?.hide()
};

const handleAppEditSuccess = async () => {
  appFormShow.value = false;

  const gid = _.get(app.value, 'group_id');
  if (!gid) return;

  app.value = await api.group.getGroup(gid);
};

const handleAppEditCancel = () => {
  appFormShow.value = false;
};

const handleBackApp = () => {
  router.push({
    name: `portal-apps`,
    replace: true
  });
};

onMounted(() => {
  init();
});

watch(() => router.currentRoute.value, () => {
  init();
});
</script>

<template>
  <div class="app-portal-container">
    <div class="app-portal-tabs">
      <div
        class="app-portal-hd-icon"
      >
        <JIcon
          :icon="DFT_ICONS.arrowLeft"
          class="back-btn p-2"
          v-tippy
          content="返回应用管理中心"
          @click="handleBackApp"
        />
      </div>
      <el-popover
        ref="appSelectRef"
        placement="right-start"
        trigger="hover"
        width="220"
        popper-class="j-popper"
        :visible-arrow="false">
        <div
          class="flex items-center border-b-[1px] border-b-gray-100 p-1"
        >
          <div
            class="app-portal-hd-icon w-11 h-11"
            style="font-size: 28px"
            :style="$menuUtils.getIconStyle(app)">
            <img
              v-if="$menuUtils.getIconImg(app)"
              :src="$menuUtils.getIconImg(app)"
            />
            <template v-else-if="$menuUtils.getIconFont(app)">
              <JIcon :icon="$menuUtils.getIconFont(app)" />
            </template>
            <JIcon
              v-else
              :icon="DFT_ICONS.question"
            />
          </div>
          <div class="flex flex-col items-start">
            <JText :content="app?.group_name" class="app-portal-title self-start" />
            <JText :content="app?.group_code" class="app-portal-remark self-start" />
            <!--        <div class="app-portal-remark">（{{ getAppUserTypeLabel(app.user_type) }}）</div>-->
          </div>
        </div>
        <AppsSelect @select="handleSelectApp" />
        <template #reference>
          <div
            class="app-portal-hd-icon menu-icon-container !h-[50px]"
            :style="$menuUtils.getIconStyle(app)"
            @click="handleGoAppDetail"
          >
            <img
              v-if="$menuUtils.getIconImg(app)"
              :src="$menuUtils.getIconImg(app)" />
            <template
              v-else-if="$menuUtils.getIconFont(app)">
              <JIcon
                :icon="$menuUtils.getIconFont(app)"
                class="h-full w-full p-4"
              />
            </template>
            <JIcon
              v-else
              :icon="DFT_ICONS.question"
              class="h-full w-full p-4"
            />
          </div>
        </template>
      </el-popover>

      <el-scrollbar
        v-if="app"
        class="flex-1 h-full overflow-x-hidden"
      >
        <div
          class="app-portal-tab"
          :class="{ 'active': routerName === 'portal-app-menu' }"
          @click="handleSelectTab('menu')">
          <JIcon :icon="DFT_ICONS.menu" />
          <span>菜单</span>
        </div>
        <div
          class="app-portal-tab"
          :class="{ 'active': routerName === 'portal-app-form' }"
          @click="handleSelectTab('form')">
          <JIcon :icon="DFT_ICONS.form" />
          <span>表单</span>
        </div>
        <div class="app-portal-tab" :class="{ 'active': routerName === 'portal-app-page' }"
             @click="handleSelectTab('page')">
          <JIcon :icon="DFT_ICONS.page" />
          <span>页面</span>
        </div>
        <div class="app-portal-tab" :class="{ 'active': routerName === 'portal-app-dcomp' }"
             @click="handleSelectTab('dcomp')">
          <JIcon :icon="DFT_ICONS.comp"></JIcon>
          <span>组件</span>
        </div>
        <div class="app-portal-tab" :class="{ 'active': routerName === 'portal-app-report' }"
             @click="handleSelectTab('report')">
          <JIcon :icon="DFT_ICONS.report" />
          <span>报表</span>
        </div>
        <div class="app-portal-tab" :class="{ 'active': routerName === 'portal-app-mb' }"
             @click="handleSelectTab('mb')">
          <JIcon :icon="DFT_ICONS.mb" />
          <span>码表</span>
        </div>
        <div
          class="app-portal-tab"
          :class="{ 'active': routerName === 'portal-app-microsvc' }"
          @click="handleSelectTab('microsvc')">
          <JIcon :icon="DFT_ICONS.api" />
          <span>微服务</span>
        </div>
        <div class="app-portal-tab" :class="{ 'active': routerName === 'portal-app-func' }"
             @click="handleSelectTab('func')">
          <JIcon :icon="DFT_ICONS.nodejs" style="font-size: 18px"></JIcon>
          <span>云函数</span>
        </div>
        <div class="app-portal-tab" :class="{ 'active': routerName === 'portal-app-task' }"
             @click="handleSelectTab('task')">
          <JIcon :icon="DFT_ICONS.task" style="font-size: 18px"></JIcon>
          <span>任务</span>
        </div>
        <div class="app-portal-tab" :class="{ 'active': routerName === 'portal-app-hook' }"
             @click="handleSelectTab('hook')">
          <JIcon :icon="DFT_ICONS.hook" />
          <span>切面</span>
        </div>
      </el-scrollbar>
    </div>
    <router-view transition="fade" transition-mode="out-in" keep-alive :app="app"></router-view>

    <!-- app 修改 -->
    <el-dialog
      :title="appFormWinName"
      v-model="appFormShow"
      :close-on-click-modal="false"
      :append-to-body="true">
      <FormApp
        v-if="appFormShow"
        action-type="edit"
        :current-data="app"
        @success="handleAppEditSuccess"
        @cancel="handleAppEditCancel"></FormApp>
    </el-dialog>
    <el-dialog
      :title="appSyncWinName"
      v-model="appSyncShow"
      width="600">
      <AppSync :app="app"></AppSync>
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped>
.app-portal-title {
  font-size: 16px
}

.app-portal-remark {
  font-size: 12px;
  color: var(--j-text-color-secondary);
}
</style>
